<html>
<meta charset="UTF-8">
<body>
<h2>Hello World!</h2>
<style type="text/css">
    #Mydiv {
        width: 200px;
        margin: auto;
        text-align: center;
    }

    #textarea {
        margin: auto;
        list-style: none;
    }
</style>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<div>
    <select name="provinces" id="provinces">

    </select>
    <select name="city" id="city">

    </select>

    <div id="Mydiv">
        请输入:
        <input type="text" id="text">
        <p id="textarea">
        </p>
    </div>
</div>
<script type="text/javascript">

    function getCity() {
        var pid = $("#provinces").val();
        $.ajax({
            "url": "cityServlet?pid=" + pid,
            "dataType": "json"
        }).done(function (data) {
            $("#city").empty();
            for (var i in data) {
                $("#city").append($("<option value=" + data[i].id + ">" + data[i].name + "</option>"));
            }
        });
    }

    $.ajax({
        "url": "/Provinces",
        "dataType": "json"
    }).done(function (data) {
        for (var i in data) {
            $("#provinces").append($("<option value=" + data[i].id + ">" + data[i].name + "</option>"));
        }
        getCity();
    });
    $("#provinces").change(function () {
        getCity();
    });


    $("#text").keyup(function () {
            var keyWord = $("#text").val();
            console.log(keyWord);
            if (keyWord == "") {
                $("#textarea").empty();
            }
            var myReg = /^[\u4e00-\u9fa5]+$/;	//判断汉字的正则表达式
            if (myReg.test(keyWord)) {	//输入的是汉字
                $.ajax({
                    url: "userServlet?name=" + keyWord,
                    dataType: "json"
                }).done(function (data) {
                        $("#textarea").empty();
                        for (var i in data) {
                            var tt  =   "q"+data[i].id;
                            $("#textarea").append($("<input id='"+data[i].id+"' type='text' onclick='set("+data[i].id+")' readonly = 'readonly' value='" + data[i].name + "'></input>"));
                            console.log(data[i].name);
                        }
                    }
                );
            }
        }
    );
    function set(tt) {
        var set = $("#"+tt).val();
        $("#text").val(set);
        console.log(set);
    }
</script>
</body>
</html>
